<script>
import { getVisLast7Days } from "@/api/home";
import * as echarts from 'echarts';
export default {
  name: 'LineChart',
  data(){
    return {
      dataList: [],
      chart: null,
      chartData: {
        categories: [],
        seriesData: [],
      },
      resMap: {}
    }
  },
  methods: {
    async getDataList(){
       const resData = await getVisLast7Days().then(res => res.data)
       this.resMap = resData
       this.initChart();
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart);
      const resMap = this.resMap
      const totalMap = {}
      Object.keys(resMap).forEach(key => {
        const dateMap = resMap[key]
        totalMap[key] = {
          visTotal: Object.keys(dateMap).length || 0,
          csTotal: 0
        }
        Object.keys(dateMap).forEach(date => {
          const count = dateMap[date]
          totalMap[key].csTotal += count
        })
      })
      const dataArr = Object.values(totalMap);
      const xdata = Object.keys(totalMap);
      const seriesData1 = dataArr.map(item => item.csTotal);
      const seriesData2 = dataArr.map(item => item.visTotal);

      let option = {
        // 添加图例
        legend: {
          data: ['访问人数', '访问次数'], // 图例名称，与 series 中的 name 对应
          bottom: 10, // 图例位置（底部）
          textStyle: {
            color: '#666', // 图例文字颜色
            fontSize: 12
          }
        },
        xAxis: {
          type: 'category',
          data: xdata,
          axisLine: {
            lineStyle: {
              color: '#999' // X 轴线颜色
            }
          },
          axisLabel: {
            color: '#666' // X 轴标签颜色
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#999' // Y 轴线颜色
            }
          },
          axisLabel: {
            color: '#666' // Y 轴标签颜色
          },
          splitLine: {
            lineStyle: {
              color: '#eee', // Y 轴分割线颜色
              type: 'dashed' // 虚线
            }
          }
        },
        series: [
          {
            name: '访问人数', // 系列名称，与图例对应
            data: seriesData2,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 3, // 线条宽度
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#36a2eb' }, // 渐变色起点
                { offset: 1, color: '#4bc0c0' }  // 渐变色终点
              ])
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(54, 162, 235, 0.6)' }, // 渐变色起点
                { offset: 1, color: 'rgba(75, 192, 192, 0.1)' }  // 渐变色终点
              ])
            }
          },
          {
            name: '访问次数', // 系列名称，与图例对应
            data: seriesData1,
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 3, // 线条宽度
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#ff6384' }, // 渐变色起点
                { offset: 1, color: '#ff9f40' }  // 渐变色终点
              ])
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(255, 99, 132, 0.6)' }, // 渐变色起点
                { offset: 1, color: 'rgba(255, 159, 64, 0.1)' }  // 渐变色终点
              ])
            }
          }
        ],
        // 全局样式
        tooltip: {
          trigger: 'axis', // 鼠标悬停提示
          backgroundColor: 'rgba(0, 0, 0, 0.7)', // 提示框背景色
          borderColor: '#333', // 提示框边框颜色
          textStyle: {
            color: '#fff' // 提示框文字颜色
          }
        },
        grid: {
          left: '5%', // 图表与容器左侧的距离
          right: '5%', // 图表与容器右侧的距离
          bottom: '20%', // 图表与容器底部的距离
          containLabel: true // 包含坐标轴标签
        }
      };

      this.chart.setOption(option);
    },

  },
  mounted() {
    this.getDataList()
  }
}

</script>

<template>
  <div class="fill-width container_con">
    <div class="fill-width cotainer_title">
     小程序访问统计
    </div>
    <el-divider class="custom-divider"/>
    <div ref="chart" style="width: 100%; height: 400px;"></div>
  </div>
</template>

<style scoped lang="scss">
  .custom-divider{
    margin: 0 !important;
  }
  .container_con{
    background: white;
    margin: 0px 0;
    border-radius: 10px;
  }
  .cotainer_title {
    padding: 10px;
    font-size: 18px;
    font-weight: bold;
  }
</style>
